import './index.scss'
import { Image, List, Toast, NavBar, Input, Card, Button } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import apis from '@/apis'
import CODE from '@/apis/code.config'
import { useSelector, useDispatch } from 'react-redux'
import { fetchLogoutApi, fetchUerInfoApi } from '@/store/modules/user'
import { useNavigate } from 'react-router-dom'
import dayjs from 'dayjs'
import { TOKEN_UTILS } from '@/utils'
import useScorll from '@/hooks/useScorll'
import { HeartOutline } from 'antd-mobile-icons'
const Leave: React.FC = () => {
  const dispatch = useDispatch()
  useEffect(() => {
    if (TOKEN_UTILS.getToken()) {
      async function getUserInfo() {
        await dispatch(fetchUerInfoApi())
      }
      getUserInfo()
    }
  }, [])
  const [msgList, setMsgList] = useState([])
  const { userInfo } = useSelector((state: any) => state.user)
  // 获取
  const getmsgList = async () => {
    const res = await apis.getMessageListApi()
    if (res.data.code === CODE.SUCCESS) {
      setMsgList(res.data.data)
    } else {
      Toast.show({
        content: res.data.message,
      })
    }
  }
  useEffect(() => {
    getmsgList()
  }, [])
  //删除
  const delmsgClick = async (id: string) => {
    const res = await apis.delMessageApi({ id })
    if (res.data.code === CODE.SUCCESS) {
      Toast.show({
        content: res.data.message,
      })
      getmsgList()
    } else {
      Toast.show({
        content: res.data.message,
      })
    }
  }
  // 点赞
  const likeClick = async (id: string) => {
    const res = await apis.likeMessageApi({ id })
    if (res.data.code === CODE.SUCCESS) {
      Toast.show({
        content: res.data.message,
      })
      getmsgList()
    } else {
      Toast.show({
        content: res.data.message,
      })
    }
  }
  // 发布
  const [textValue, setTextValue] = useState('')
  const textValueOnChange = (e: any) => {
    setTextValue(e)
  }
  const submitText = async () => {
    if (!textValue) {
      return Toast.show({
        content: '请输入内容',
      })
    }
    const { scrollToTop } = useScorll()
    const res = await apis.submitMessageApi({
      content: textValue,
      username: userInfo.username,
      message_date: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    })

    if (res.data.code === CODE.SUCCESS) {
      Toast.show({
        content: res.data.message,
      })
      getmsgList()
      setTextValue('')
      scrollToTop()
    } else {
      Toast.show({
        content: res.data.message,
      })
    }
    setTextValue('')
  }
  const navigate = useNavigate()
  const logout = () => {
    dispatch(fetchLogoutApi())
    navigate('/mobile/login')
    Toast.show({
      content: '退出成功',
    })
  }
  const navRight = (
    <div className="navbar_box">
      {TOKEN_UTILS.getToken() && (
        <div>
          <div>{userInfo.username}</div>
          <div onClick={logout} className="logout_box">
            退出
          </div>
        </div>
      )}
    </div>
  )
  return (
    <div style={{ paddingBottom: 80 }}>
      <NavBar back={null} className="navBar" right={navRight}>
        留言板
      </NavBar>
      <Card>
        <div className="topBox">
          <span>留言</span>
          <span style={{ color: '#9499A0', paddingLeft: 10 }}>
            {msgList.length}
          </span>
        </div>
        <List className="message_box">
          {msgList.length > 0 &&
            msgList.map((item, index) => (
              <List.Item
                key={index}
                prefix={
                  <Image
                    src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`}
                    style={{ borderRadius: 20 }}
                    fit="cover"
                    width={40}
                    height={40}
                  />
                }
                description={
                  <div className="content_box">
                    <div className="date_box">
                      <span>{item.message_date}</span>
                      <HeartOutline onClick={() => likeClick(item.id)} />
                      <span>{item.like_num}</span>
                      {(item.username === userInfo.username ||
                        userInfo.username === 'admin') && (
                        <a onClick={() => delmsgClick(item.id)}>删除</a>
                      )}
                    </div>
                  </div>
                }
              >
                <div className="user_name_box">来自: {item.username}</div>
                <div className="mobile_content_box">{item.content}</div>
              </List.Item>
            ))}
          {msgList.length === 0 && <div className="no_message">没有留言</div>}
        </List>
      </Card>
      <div className="mobile_leave_bottom">
        <Input
          className="textArea_box"
          placeholder="来啦？整两句？"
          maxLength={255}
          value={textValue}
          onChange={textValueOnChange}
        />
        <Button color="primary" onClick={submitText}>
          发表
        </Button>
      </div>
    </div>
  )
}
export default Leave
